<template>
  <div class="subjectSelect">
    <tab v-if="tabNameList.length > 0" style="flex: 0 0 auto" active-color="#43A2FE" v-model="currentIndex">
      <tab-item v-for="(item, index) in tabNameList" :key="index" :selected="index===currentIndex">
        <span>{{ item }}</span>
      </tab-item>
    </tab>
    <ul>
      <li v-for="(item,index) in swiperList[currentIndex]" @click="getCityByParent(item)" :key="index">
        {{item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {Tab, TabItem, XInput, Swiper, SwiperItem,} from 'vux'

  export default {
    name: "subjectSelect",
    components: {
      Tab,
      TabItem,
      XInput, Swiper, SwiperItem,
    },
    data() {
      return {
        currentIndex: 0,
        tabNameList: [],
        swiperList: [],
      }
    },
    created() {
      this.choiceSubject()
    },
    mounted() {
    },
    methods: {
      //请求树形数据结构
      choiceSubject() {
        this.$http.get('/expense/api/expensesubject/tree').then(res => {
            this.swiperList.push(res.data.data);
            this.tabNameList.push('请选择');
          }
        )
      },
      getCityByParent(item) {
        //获取子节点信息
        if (item.children.length == 0) {
          this.$emit('checkSubject', {item:item,history:this.tabNameList.map((r,index)=>{
            if(index === this.tabNameList.length- 1)
              return item.text;
            return r
            })});
          return
        }
        //tabName显示逻辑
        this.tabNameList.splice(this.currentIndex + 1, this.tabNameList.length);

        if (this.tabNameList.length == 0) {
          this.tabNameList.push(item.text);
        } else {
          this.tabNameList.pop();
          this.tabNameList.push(item.text);
          this.tabNameList.push('请选择');
        }
        // 内容显示逻辑
        this.swiperList.splice(this.currentIndex + 1, this.swiperList.length);
        this.swiperList.push(item.children);
        // 移动到下一个节点
        this.currentIndex++;
      },
    },
  }
</script>

<style lang="less">
  .subjectSelect {
    display: flex;
    flex-direction: column;
    .vux-x-input {

    }
    ul {
      overflow: auto;
      width: 100%;
      background-color: #fff;
      flex: 1 1 auto;
      li {
        list-style: none;
        line-height: 0.35rem;
        font-size: 0.15rem;
        padding: 0 20px;
      }
    }
  }
</style>
